<template>
  <div class="table-ctrl-body">
    <!--{{tableHtml}}-->
    <!--按钮组-->
    <div class="Btns-ctrl-body">
      <div class="search-ctrl f-l" v-if="tableHtml.btns.leftBtns">

        <form style="height: 100%;">
          <input :type="item.type" :class="item.className" v-for="(item,index) in tableHtml.btns.leftBtns.inputs" :placeholder="item.placeholder" :key="index" :name="item.fieldName" :ref="item.fieldName">
          <button :type="tableHtml.btns.leftBtns.button.type" @click="submitBtn(tableHtml.btns.leftBtns.button)" class="search-btn btn" :class="tableHtml.btns.leftBtns.button.className">{{ tableHtml.btns.leftBtns.button.name }}</button>
        </form>
        <!-- {{isShowModal}} -->
      </div>
      <div class="btns f-r">
        <button type="button" class="btn" v-for="(tableBtn,index) in (tableInit.btns||tableHtml.btns.rightBtns)" @click="layoutClick(tableBtn)" :class="tableBtn.className" :key="index">{{ tableBtn.name }}</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <div class="table-header">
        <table class="table-default">
          <thead>
            <tr>
              <th v-for="(item,index) in tableHtml.heads" v-if="item.hidden!=='1'" :style="{width: item.width}" :key="index">
                {{item.name}}
              </th>
            </tr>
          </thead>
        </table>
      </div>
      <!--
         {{tableRowHtml.data.data[0].policeStationInfo.stationName}} -->
      <!--
            policeStationInfo.policeStationInfo
        -->
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">

          <tbody v-if="tableRowHtml">
            <tr @click="selectTableRow(trs,index)" :class="{active:index===active}" v-for="(trs,index) in tableRowHtml.data.data" :key="index">
              <td v-for="(tds,index) in tableHtml.heads" v-if="tds.hidden!=='1'" :title="trs[tds.property]" :style="{width: tds.width}" :key="index">
                {{ [trs,tds.property] |subName }}

              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages v-show="tableRowHtml.data.elementsSum !== 0" v-if="tableRowHtml" :showItem="10" :pageSize="20" :allDataSum="tableRowHtml.data.elementsSum" :allpage="(Math.ceil(tableRowHtml.data.elementsSum/20))" @current-change="tablePageData"></Pages>

    </div>

    <!--提示框-->
    <Dialog @SubmitDialogBtn="SubmitDialog" @dialog-close="dialogClose" :dialogInit="dialogInit" :dialogIsShow="dialogIsShow"></Dialog>

    <!--模态窗新增-修改-->
    <ModalWindow :initModalHtml="modalData" :isShowModal="isShowModal" @modal-close="modalClose"></ModalWindow>


  </div>
</template>

<script>
  import Dialog from "../dialog/Dialog"
  import ModalWindow from "../modalWindow/ModalWindow"
  import Pages from "../sudoku/atom/pages"
  import ModalQuery from "../modalWindow/ModalQuery"
  export default {

    name: "TableHtml",
    props: {
      tableHtml: {
        type: Object
      },
      tableRowHtml: {
        type: Object
      }
    },
    data() {
      return {
        active: false,
        tableData: [],
        tableInit: [],
        initHtmlModal: {},
        headerTable: [],
        searchModel: "",
        isShowModal: false,
        isShowModalQuery: false,
        modalData: {},
        dialogInit: {},
        dialogIsShow: false
      }
    },

    components: {
      Dialog,
      ModalWindow,
      Pages,
      ModalQuery
    },

    methods: {
      layoutClick(btnObj) { //表格按钮组公用事件
        //console.log(btnObj);

          let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));

          if (btnObj.action === "modal" || btnObj.action === "queryModal") {

            btnObj.action === "modal" ? this.isShowModal = !this.isShowModal : "";

            //加载模态窗口html
            //console.log(btnObj.click[0].httpType);
            //console.log(btnObj.click[0].url);
            ////console.log(this.getParams(btnObj.click[0].params));

            if( btnObj.click[0].params.length > 0 ){
               this.$axios[btnObj.click[0].httpType](this.HOST + btnObj.click[0].url, this.getParams(btnObj.click[0].params))
              .then((data) => {

                this.modalData = data.data; //加载模态窗口数据壳子

              })
              .catch((err) => {
                //console.log(err);
              });
            }else{
               this.$axios[btnObj.click[0].httpType](this.HOST + btnObj.click[0].url,{})
              .then((data) => {
                this.modalData = data.data; //加载模态窗口数据壳子
              })
              .catch((err) => {
                //console.log(err);
              });
            }


          } else {
            for (let i = 0; i < btnObj.click[0].params.length; i++) {
              if (stroageData[btnObj.click[0].params[i].name]) { //参数匹配上的时候
                //console.log(btnObj.click[0].params[i].name + "在缓存中存在，值为" + stroageData[btnObj.click[0].params[i].name]);
                //console.log(btnObj.click[0]);
                this.dialogInit = btnObj.click[0].tips;
                this.dialogIsShow = !this.dialogIsShow;
                //console.log(this.dialogIsShow);
                //console.log(btnObj.click[0]);
                this.dialogInit.params = [];
                this.dialogInit.url = btnObj.click[0].url;
                this.dialogInit.httpType = btnObj.click[0].httpType;

                for (let i = 0; i < btnObj.click[0].params.length; i++) {
                  //console.log(btnObj.click[0].params[i]);
                  if (btnObj.click[0].params[i].onlyValid && btnObj.click[0].params[i].onlyValid === "1") {
                    //this.dialogInit.params[i].name = null;
                  } else {
                    this.dialogInit.params.push(btnObj.click[0].params[i])
                  }

                }
                //console.log(this.dialogInit.params);

                this.dialogInit.cacheDelete = btnObj.click[0].cacheDelete;

                if (btnObj.click[0].callback) {
                  this.dialogInit.callBack = btnObj.click[0].callback;
                }

                //console.log(this.dialogInit);
                //this.dialogIsShow = !this.dialogIsShow; httpType
              } else { //删除等参数不存在
                //console.log(btnObj.click[0].params[i].name + "在缓存中不存在，值为" + stroageData[btnObj.click[0].params[i].name]);
                //console.log(btnObj.click[0].params[i].valid.content);
                this.dialogInit = btnObj.click[0].params[i].valid;
                this.dialogIsShow = !this.dialogIsShow;
              }
            }
          if (btnObj.click[0].params.length > 0) { //有参数传递
          }
        }
        //console.log(this.isShowModal);
      },
      getParams(paramsObj) {
        //console.log(paramsObj);
        let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
        //console.log(stroageData);
        let params = {};
        for (let i = 0; i < paramsObj.length; i++) {
          if (paramsObj[i].type === "map") {
            let _json = {};
            for (let stroageKey in stroageData) {
              for (let k = 0; k < paramsObj[i].keys.length; k++) {
                if (stroageKey === paramsObj[i].keys[k]) {
                  _json[stroageKey] = stroageData[stroageKey];
                  params = _json;
                }
              }
            }
          }
        }
        return params;
      },
      SubmitDialog(urObj) { //对话框提交
        //console.log(urObj);
        //console.log(urObj.params);
        let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
        //console.log(stroageData);
        let params = {};
        for (let i = 0; i < urObj.params.length; i++) {
          for (let stroagKey in stroageData) {
            if (urObj.params[i].name === stroagKey) {
              params[stroagKey] = stroageData[stroagKey];
            }
          }
        }

        //console.log(params);
        //console.log(this.tableRowHtml.data.data);

        this.$axios[urObj.httpType](this.HOST + urObj.url, {
            params: params
          })
          .then((data) => {
            this.dialogIsShow = !this.dialogIsShow;
            if (data.data.success === false || data.data.success === "false") { //失败
              alert(urObj.callBack.success.alert.content);
            } else { //成功
              alert(urObj.callBack.success.alert.content);
              ////console.log(this.tableRowHtml.data.data);
              for (let paramsKey in params.cacheDelete) { //成功后功能清除缓存区
                stroageData[paramsKey] = params.cacheDelete[paramsKey];
              }
              sessionStorage.setItem("cacheMappingTable", JSON.stringify(stroageData));
              //console.log(JSON.parse(sessionStorage.getItem("cacheMappingTable")));
              if (urObj.callBack.success) {
                this.$emit("tableSuccess", {
                  "url": urObj.callBack.success.url,
                  "apiType": urObj.callBack.success.httpType
                })
              }
            }
            //console.log(data);
          })
          .catch((err) => {
            //console.log(err);
          })
      },
      selectTableRow(tableRowObj, index) { //选中当前行
        //console.log(tableRowObj);
        ////console.log(index);
        this.active = index; //索引
        let initHtmlModal = JSON.parse(sessionStorage.getItem("initHtmlData"));
        let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
        for (let mapKey in initHtmlModal.table.initData[0].click[0].cacheMapping) {
          for (let rowKey in tableRowObj) {
            if (mapKey === rowKey) {
              stroageData[initHtmlModal.table.initData[0].click[0].cacheMapping[mapKey]] = tableRowObj[rowKey];
            }
          }
          ////console.log(mapKey);
          //stroageData[mapKey] =
        }
        ////console.log(stroageData);
        sessionStorage.setItem("cacheMappingTable", JSON.stringify(stroageData)); //将选中缓存储存到页面中。
        ////console.log(initHtmlModal);
        ////console.log(tableRowObj);
      },
      submitBtn(formObj) { //搜索功能
        //console.log(formObj);

        let btnApi = {
          apiType: formObj.click[0].httpType,
          url: formObj.click[0].url
        }
        //formObj
        //console.log(this.tableHtml.btns.leftBtns.inputs);
        //console.log(btnApi);

        let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
        for (let i = 0; i < this.tableHtml.btns.leftBtns.inputs.length; i++) {
          stroageData[this.tableHtml.btns.leftBtns.inputs[i].fieldName] = this.$refs[this.tableHtml.btns.leftBtns.inputs[i].fieldName][0].value;
        }
        sessionStorage.setItem("cacheMappingTable", JSON.stringify(stroageData));
        //console.log(JSON.parse(sessionStorage.getItem("cacheMappingTable")));

        this.$emit("seachTable", btnApi);
        ////console.log(this.tableRowHtml);
      },
      tablePageData(dataPage) { //分页向上通知
        this.$emit("PageNew", dataPage);
      },
      dialogClose() {
        this.dialogIsShow = !this.dialogIsShow;
      },
      modalClose() {
        this.isShowModal = !this.isShowModal;
      }
    },
    computed: {},
    created() {

    }
  }
</script>

<style scoped>
  .fadeInDown,
  .fadeOutUp {
    animation-duration: .500s;
  }
</style>
